<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同步登录58同城</title>
    <link rel="stylesheet" href="__CDN__/assets/css/login58.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="pop_mask">
        <div class="passwordlogin" style="display: block;">
            <div class="change">
                <span id="phonenum" class="active">手机动态码登录</span>
                <div class="clear"></div>
            </div>
            <div class="phonenumlogin" style="display: block;">
                <div class="item phonenumlogin_item_phone">
                    <input type="text" name="row[mobile]" id="c-mobile" placeholder="手机号" maxlength="11">
                    <span class="getcode">获取动态码</span>
                    <div class="phone_msg msg"><span class="phone_msgtext">请输入正确的手机号</span>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="item">
                    <input type="text" name="row[code]" id="c-code" placeholder="动态码" maxlength="6">
                    <div class="mobilecode_msg msg"><span class="mobilecode_msgtext"></span>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="item">
                    <button id="btn_phonenum" type="submit" class="btn">登录</button>
                    <!--<div class="protocol">登录即同意<a target="_blank"-->
                    <!--                              href="//about.58.com/home2/home_pc/syxyjgg/771.html">《58同城使用协议》</a>&amp;<a-->
                    <!--        target="_blank" href="//helpcenter.58.com/helpcenter_pc/yhfwxy/724.html">《隐私政策》</a></div>-->
                </div>

            </div>
        </div>
    </div>
</form>
<input type="hidden" id="url58" value="{$url58}">
<script>
    function validatePhone() {
        let phone = $.trim($('#c-mobile').val())
        let reg = /^1[3|5|6|7|8|9][0-9]{9}$/; //电话号码验证规则

        let res = phone.length == 0 || !reg.test(phone)
        if (res) { //如果电话号码为空或者电话号码输入不正确
            $('.phone_msg').css('display', 'block')
        } else {
            $('.phone_msg').css('display', 'none')
        }
        return res
    }

    function validateCode() {
        let code = $.trim($('#c-code').val())
        if (code.length == 0) {
            $('.mobilecode_msg').css('display', 'block')
            $('.mobilecode_msgtext').html('请先获取动态码')
        } else {
            $('.mobilecode_msg').css('display', 'none')
        }
        return code.length == 0 ? true : false
    }

    $(function () {
        // 倒计时
        let code = true; //表示验证码已经发送
        $('.getcode').click(function () {
            if (!validatePhone()) { //如果电话号码输入正确，则验证码发送成功，倒计时开始
                let timer = 61;
                var url58 = $('#url58').val();
                console.log('url58');
                console.log(url58);
                var mobile = $.trim($('#c-mobile').val());
                //获取58接口请求
                $.ajax({
                    url: url58 + "/api/phone_login",
                    data:{
                        'phone':mobile
                    },
                    type: 'post',
                    dataType: 'json',
                    success:function(result){
                    	if(result.code == 0){
                    		 if (code) {
				                    code = false;//表示当验证码发送完成后，发送按钮不可点击
				                    let n = setInterval(function () {
				                        timer--;
				                        $('.getcode').html(timer + 's后重新获取');
				                        if (timer == 0) {
				                            clearInterval(n);
				                            code = true;//当倒计时为0时，即可重新发送验证码
				                            $('.getcode').html('重新获取')
				                        }
				                    }, 1000)
				                }
                    	}else{
                    		alert(result.msg);
                    	}
                        
                    }});
               
            }
        })
        // 手机号失焦
        $('#c-mobile').blur(function () {
            validatePhone()
        })
        // 验证码失焦
        $("#c-code").blur(function () {
            validateCode()
        })

        $("#c-code").bind("input propertychange change", function (event) {
            //代码块
            if ($.trim($('#mobilecode').val()).length > 0 && !validatePhone()) {
                $('#btn_phonenum').css('color', 'rgb(255, 255, 255)')
            } else {
                $('#btn_phonenum').css('color', 'rgba(255, 255, 255,.5)')
            }
        })

        // //登录
        // $('.btn').click(function () {
        //     let resPhone = validatePhone()
        //     let resCode = validateCode()
        //     console.log(resPhone)
        //     console.log(resCode)
            
        //     if (!resPhone && !resCode) {
        //     	var mobile = $.trim($('#c-mobile').val());
        //     	var code = $.trim($('#c-code').val());
        //     	var url58 = $('#url58').val();
	       //     console.log(mobile)
	       //     console.log(code)
        // 		console.log(url58)
        //          $.ajax({
        //             url: url58 + "/api/send_code",
        //             data:{
        //                 'phone':mobile,
        //                 'code':code
        //             },
        //             type: 'post',
        //             dataType: 'json',
        //             success:function(result){
        //             	console.log(result)
        //             	if(result.code == 0){
        //             		 alert(result.msg);
        //             		 //window.location.href = "/dashboard/index";
        //             	}else{
        //             		alert(result.msg);
        //             	}
                        
        //             }});
        //     }

        // })

    })
</script>
</body>
</html>
